<!-- 其他书本展示 -->
<template>
    <ul class="otherBookShow">
        <li v-for="item in otherBookArr" :key="item.id" @mouseenter="getBookId(item.id)" @click="gotoDetail(item)">
            <router-link :to="{path:'',query:{id:id}}">
                <div class="mainPicture">
                    <img :src="item.cover" alt="">
                </div>
            </router-link>

            <div class="bookInfo">
                <router-link :to="{path:'',query:{id:id}}">
                    <div class="bTitle">
                        <h4>Z:{{item.title}}</h4>
                    </div>
                </router-link>
                <div class="price">
                    <span>￥</span>
                    <span>{{item.price}}</span>
                    <span class="lastSpan" style="color: #978897;margin-left: 2px;">当前价</span>
                </div>
                <div class="race">
                    <span>浏览 {{item.browse}}</span>
                    <span>竞拍 {{item.acutions}}</span>
                </div>
                <div class="surplusTime" v-if="category === 3">
                    <span :endtime="item.endTime"
                        ref="endtime">{{formatTime(item.endTime,item.startTime,item.id)}}</span>
                </div>
                <div class="surplusTime" v-else>
                    <span :endtime="item.endTime"
                        ref="endtime">{{formatTime(item.endTime,item.startTime,item.id)}}</span>
                </div>
            </div>
        </li>
    </ul>
</template>

<script lang="ts">
import { getgoodsInfo, updataStatus } from '@/utils/api';
import { defineComponent, nextTick } from 'vue';
interface bookInfo {
    id: number;
    title: string,
    cover: string,
    price: number,
    browse: number,
    acutions: number,
    endTime: '',
    startTime: ''
}
export default defineComponent({
    data() {
        return {
            category: 1,
            otherBookArr: [] as Array<bookInfo>,
            arrLength: 0,
            id: 0,
            historyData: [] as Array<object>,
        }
    },
    props: {
        titleh: Number,
        specialId: Number
    },
    mounted() {
        if (this.titleh === 2) {
            this.category = 2;
        } else if (this.specialId === 1) {
            this.category = 3;
        }
        getgoodsInfo(this.category).then((res) => {
            this.otherBookArr = res.data.slice(0, 12);
            this.arrLength = res.data.length;

            this.$emit('get-arr-length', this.arrLength);
        }).catch((error) => {
            console.log(error);
        });
    },
    methods: {
        gotoDetail(books: any) {
            this.$router.push('/detail/' + books.id);
            // this.historyData.push(books)
            // console.log(this.historyData)
            // // console.log(this)
            let hArr = [];
            let storage = localStorage.getItem("historyData");
            if (storage) {
                hArr = JSON.parse(storage);
            }
            let ind = hArr.findIndex((b: { id: number }) => b.id === books.id);
            ind == -1 && hArr.push(books);
            localStorage.setItem('historyData', JSON.stringify(hArr));
            // this.historyData+=storage
            console.log(this.historyData)
        },

        // gotoDetail(id:number) {

        //     this.$router.push('/detail/' + id);
        // //  this.$router.push({path:`/detail?id=${id}`})
        // },
        formatTime(endTime: string, startTime: string, id: number) {
            // 结束时间
            const current = +new Date(endTime);
            //开始时间
            const current2 = +new Date(startTime);
            // 当前时间
            const current1 = +new Date();
            const start = current2 - current1;
            const end = current - current1;
            if (end <= 0) {
                updataStatus(id).then((res) => {
                    console.log(res);
                }).catch((error) => {
                    console.log(error);
                });
            }
            // 剩余毫秒数
            const surplus = (start > 0 ? start : end) / 1000;
            // 剩余天数
            const days = parseInt((surplus / 60 / 60 / 24) as unknown as string);
            //剩余小时
            const hours = parseInt((surplus / 60 / 60 % 24) as unknown as string);
            //剩余分钟
            const minutes = parseInt((surplus / 60 % 60) as unknown as string);
            //剩余秒数
            const seconds = parseInt((surplus % 60) as unknown as string);
            if (this.specialId === 1) {
                return `距开始 ${days.toString().padStart(2, '0')}天${hours.toString().padStart(2, '0')}时${minutes.toString().padStart(2, '0')}分${seconds.toString().padStart(2, '0')}秒`;
            }
            return `剩余 ${days.toString().padStart(2, '0')}天${hours.toString().padStart(2, '0')}时${minutes.toString().padStart(2, '0')}分${seconds.toString().padStart(2, '0')}秒`;
        },
        getBookId(value: number) {
            this.id = value;
        },
    }

});

</script>

<style lang="scss" scoped>
.otherBookShow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
        width: 250px;
        height: 402px;
        margin-top: 32px;
        border: 1px solid #E9E9E9;

        .mainPicture {
            text-align: center;
            height: 250px;
            background-color: #F6F6F6;
            text-align: center;

            img {
                width: 240px;
                height: 250px;
            }
        }
    }
}

.bookInfo {
    width: 218px;
    height: 127px;
    margin: 0 auto;

    .bTitle {
        height: 40px;
        font-size: 16px;
        color: #333;
        margin-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        // 显示多少行文字
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        h4 {
            // 去除h标签的字体加粗
            font-weight: normal;
        }
    }

    .price {
        height: 26px;
        margin-top: 15px;

        span:nth-child(2n-1) {
            font-size: 12px;
        }

        span:not(.lastSpan) {
            color: #9E100E;
        }

        span:nth-child(2n) {
            font-size: 18px;
            font-weight: bold;
        }
    }

    .race {
        margin-top: 8px;

        span {
            font-size: 12px;
            color: #978897;
            margin-right: 20px;
        }
    }

    .surplusTime {
        margin-top: 5px;

        span {
            font-size: 12px;
            color: #978897;
            margin-right: 20px;
        }
    }
}
</style>